@use "variables" as *;

@use "./components/Popup/AdvancedSetting";
@use "./components/Header";
@use "./components/HistorySidebar";
@use "./components/Toast";
@use "./components/Tooltip";
@use "./components/InfoTooltip";
@use "./components/ThemeSwitch";
@use "./components/PopupWindow";
@use "./components/PopupConfirm";
@use "./components/Switch";
@use "./components/CheckBox";
@use "./components/Select";
@use "./components/DropDown";
@use "./components/Keymap";
@use "./overlay/Overlay";

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex;
  justify-content: center;
  background: var(--bg);
  color: var(--text-strong);
  :lang(ko) {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
}

#root {
  width: 100%;
  height: 100vh;
}

.app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--text-strong);
}

.app-content {
  display: flex;
  flex: 1;
}

.outlet-container {
  display: flex;
  flex: calc(100% - var(--code-modal-width));
  position: relative;
  min-width: $outlet-container-width;
}

.main-container {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - $header-height);
  padding: 20px;
  color: var(--text-strong);
}
